* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  word-wrap: break-word;
}

a{
  color: #000;
}

.top-nav {
  min-height: 35px;
  width: 100%;
  background-color: #cb9864;
  text-align: center;
  font-size: 0;

  .top-nav-center {
    margin: 0 auto;
    max-width: 1320px;
    height: 100%;
    line-height: 35px;

    .swiper-wrapper {
      height: 35px;

      .swiper-slide {
        p {
          font-size: 14px;
        }
      }
    }
  }
}

header {
  width: 100%;
  background-color: #fff;

  .header-container {
    margin: 0 auto;
    padding: 0 20px;
    max-width: 1320px;

    >.header-content {
      display: flex;
      display: -webkit-flex;
      justify-content: space-between;
      padding-top: 9px;

      .header-content-left {
        display: flex;
        display: -webkit-flex;

        li {
          margin: 0 10px;

          a {
            padding: 0 10px;
            line-height: 32px;
            font-size: 12px;
            color: #999;

            .span-point {
              position: relative;

              &::after {
                content: '';
                display: block;
                position: absolute;
                top: 6px;
                right: -22px;
                height: 4px;
                width: 4px;
                border-radius: 50%;
                background-color: #999;
              }
            }

            .iconfont {
              font-size: 12px;
            }
          }
        }

        &:nth-child(2) {
          li {
            a {
              color: #000;

              .span-point {
                position: relative;

                &::after {
                  background-color: #000;
                }
              }
            }
          }
        }
      }
    }

    >.header-logo {
      margin: 0 auto 20px;
      height: 51px;
      width: 283px;

      a {
        img {
          width: 100%;
        }
      }
    }
  }
}

.nav-container {
  position: sticky;
  top: 0;
  left: 0;
  z-index: 999;
  background-color: #fff;
  width: 100%;
  border-bottom: 1px solid #000;

  >.nav-content {
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    display: -webkit-flex;
    justify-content: space-between;
    max-width: 1320px;
    border-top: 1px solid #efeded;

    >.nav-content-left {
      display: flex;
      display: -webkit-flex;

      >li {
        margin: 0 16px;

        &:first-child {
          margin-left: 0;
        }

        &:nth-of-type(2),&:nth-of-type(3),&:nth-of-type(4) {
          >a::after {
            content: '';
            display: block;
            // display: none;
            opacity: 0;
            position: absolute;
            bottom: -20px;
            left: 50%;
            transform: translateX(-50%);
            width: 0;
            height: 0;
            border: 10px solid;
            z-index: 999;
            border-color: #000 transparent transparent transparent;
            transition: all .2s ease-in;
          }
        }

        &:hover {
          a::after {
            opacity: 1;
          }
        }

        >a {
          position: relative;
          display: block;
          height: 100%;
          padding: 0 12px;
          font-size: 14px;
          line-height: 50px;
          color: #000;
        }

        .sub-menu {
          position: absolute;
          left: 0;
          z-index: 997;
          display: none;
          width: 100%;
          border-top: 1px solid #000;
          background-color: #fff;
          transition: all 1s ease-in;

          // &:hover ~ .tri-active{
          //   &::after{
          //     display: block;
          //   }
          // }

          a {
            color: #000;
          }

          >ul {
            margin: 0 auto;
            font-size: 0;
            padding: 39px 20px 50px;
            max-width: 1320px;

            >li {
              margin: 0 20px;
              width: 210px;
              display: inline-block;
              vertical-align: top;

              >a {
                margin-bottom: 10px;
                font-size: 14px;
                font-weight: 700;
                display: inline-block;
              }

              >.sub-menu-text {
                ul {
                  li {
                    margin-bottom: 8px;

                    a {
                      font-size: 14px;
                    }
                  }
                }
              }
            }
          }

          >.sub-menu-bottom {
            padding: 30px 0;
            background-color: #f2f2f2;

            .sub-menu-bottom-box {
              margin: 0 auto;
              padding: 0 20px;
              max-width: 1320px;
              display: flex;
              display: -webkit-flex;

              .products-recommend {
                width: 50%;
                display: flex;
                display: -webkit-flex;
                align-items: center;

                .recommend-left {
                  margin-right: 20px;
                  display: inline-block;
                  position: relative;

                  >a {
                    >span {
                      position: absolute;
                      top: 0;
                      left: 0;
                      font-size: 13px;
                      color: #fff;
                      text-align: center;
                      line-height: 29px;
                      min-width: 54px;
                      height: 29px;
                      background-color: #000;
                    }
                  }
                }

                .recommend-right {
                  display: inline-block;

                  >h4 {
                    margin-bottom: 6px;
                    font-size: 14px;
                    font-weight: 700;
                    line-height: 1.2;
                  }

                  >p {
                    margin-bottom: 26px;
                  }

                  a {
                    font-size: 14px;
                    color: #000;
                  }
                }
              }
            }
          }
        }
      }
    }

    .nav-content-right {
      margin-top: 5px;
      position: relative;

      input {
        padding: 5px 38px 5px 9px;
        height: 39px;
        width: 315px;
        border: 1px solid #000;
      }

      .search {
        width: 38px;
        height: 39px;
        position: absolute;
        top: 0;
        right: 0;
        background-color: #000;

        .icon-search {
          margin-top: -7px;
          position: absolute;
          top: 50%;
          right: 12px;
          color: #fff;
        }
      }
    }
  }
}

footer {
  .footer-block-box {
    display: flex;
    display: -webkit-flex;
    align-items: center;
    width: 100%;
    height: 175px;
    background-color: #000;

    >ul {
      display: flex;
      display: -webkit-flex;
      margin: 0 auto;
      width: 1280px;

      >li {
        padding: 10px 0;
        width: 25%;
        text-align: center;
        color: #fff;

        >i {
          font-size: 60px;
        }

        >.icon-shouquanzhengpin {
          margin-bottom: 5px;
          font-size: 55px;
        }

        >p {
          font-size: 12px;
          color: #999;
        }

        >p:nth-of-type(1) {
          margin-top: 10px;
          margin-bottom: 8px;
          color: #fff;
        }

        >p:last-child {
          margin-top: 4px;
          margin-bottom: 10px;
        }
      }
    }
  }

  .footer-text-box {
    margin: 0 auto;
    padding: 34px 66px;
    display: flex;
    display: -webkit-flex;
    width: 1280px;

    .footer-text-content {
      width: 20%;
      font-size: 14px;

      >ul {
        >li {
          margin-bottom: 15px;

          >a {
            color: #999;
          }


          &:first-child>a {
            color: #000;
          }
        }
      }

      >.footer-search {
        >p {
          margin: 0 0 10px;
          font-size: 14px;
        }

        >.search-input {
          position: relative;
          padding-right: 40px;

          >input {
            height: 38px;
            width: 100%;
          }

          >a {
            position: absolute;
            top: 0;
            right: 3px;
            height: 38px;
            line-height: 38px;
            text-align: center;
            min-width: 38px;
            padding: 0 5px;
            background-color: #000;
            color: #fff;
          }
        }
      }

      >.footer-contact {
        margin-top: 36px;

        .follow-us {
          >p {
            margin: 0 0 15px;
          }

          >ul {
            display: flex;
            display: -webkit-flex;

            >li {
              margin-bottom: 15px;
              padding-right: 20px;

              >a {
                color: #000;

                >i {
                  font-size: 25px;
                }
              }
            }
          }
        }

        .contact-us {
          margin: 18px 0;

          >p {
            margin-bottom: 15px;
          }
        }
      }
    }
  }

  .footer-logo {
    margin: 12px 0 46px;
    text-align: center;

    >a {
      color: #000;

      >img {
        width: 436px;
      }
    }
  }

  .footer-bottom {
    padding: 36px 40px 48px;
    text-align: center;
    background-color: #f2f2f2;

    >p {
      margin-bottom: 15px;
      font-size: 12px;
      color: #000;
    }

    >.statement-one {
      font-size: 0;
      margin-bottom: 15px;
      display: flex;
      display: -webkit-flex;
      justify-content: center;

      >li {
        margin: 0 10px;
        min-height: 23px;
        display: flex;
        display: -webkit-flex;
        align-items: center;
        font-size: 12px;

        >.icon-gongshang {
          font-size: 17px;
          color: red;
        }

        >span {
          color: #000;
        }
      }
    }

    >.statement-two {
      font-size: 0;
      margin-bottom: 12px;
      display: flex;
      display: -webkit-flex;
      justify-content: center;

      >li {
        padding: 0 20px;
        display: flex;
        display: -webkit-flex;
        align-items: center;

        >a {
          font-size: 12px;
          color: #000;
          text-decoration: underline;
        }
      }
    }
  }
}